<template>
  <a-modal v-model:visible="visible" title="进行中的任务列表" :width="1200" :footer="false">
    <div class="table-page">
      <!-- <div class="title-box">进行中的任务列表</div> -->
      <a-form label-align="right" auto-label-width :model="form" class="form">
        <a-row :gutter="16" wrap>
          <a-col :xs="12" :md="12" :lg="8" :xl="6" :xxl="6">
            <a-form-item field="keywords" label="关键词">
              <a-input v-model="form.keywords" placeholder="请输入关键词" />
            </a-form-item>
          </a-col>
          <a-col :xs="12" :md="12" :lg="8" :xl="6" :xxl="6">
            <a-space>
              <a-button type="primary" @click="initTaskList">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <section class="table-box">
        <a-table
          row-key="id"
          size="small"
          page-position="bl"
          :bordered="{ cell: true }"
          :loading="loading"
          :data="tableData"
          :scroll="{ x: '100%', y: '500px', minWidth: 1000 }"
          :pagination="{ showPageSize: true, showTotal: true, total: total, current: current, pageSize: pageSize }"
          @page-change="changeCurrent"
          @page-size-change="changePageSize"
        >
          <template #columns>
            <a-table-column title="ID" :width="68" data-index="id"> </a-table-column>
            <a-table-column title="关键词" data-index="keywords"></a-table-column>
            <a-table-column title="类型" data-index="type">
              <template #cell="{ record }">
                <span v-if="record.type == 2">关联关键词</span>
                <span v-if="record.type == 1">输入关键词</span>
              </template>
            </a-table-column>
            <a-table-column title="模板名称" data-index="template_name">
              <template #cell="{ record }">
                {{ record.template_one?.name || '' }}
              </template>
            </a-table-column>

            <a-table-column title="任务状态" data-index="user_name">
              <template #cell="{ record }">
                <a-tag color="green">进行中</a-tag>
                <!-- <a-tag v-if="record.status === 'stop'">禁用</a-tag> -->
              </template>
            </a-table-column>
          </template>
        </a-table>
      </section>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { usePagination } from '@/hooks'
import { relatedlog } from '@/apis'
import { Message } from '@arco-design/web-vue'
import { format } from 'date-fns'

const chartModalRef = ref(null)
const props = defineProps({})
const visible = ref(false)
type Form = { name: string; url: string; id?: string }
const form: Form = reactive({
  keywords: ''
})

// 任务表格
const { current, pageSize, total, changeCurrent, changePageSize, setTotal } = usePagination(() => initTaskList())

const tableData = ref([])
const initTaskList = async () => {
  let res = await relatedlog({ page: current.value, pagesize: pageSize.value, ...form, exec_status: 2 })
  tableData.value = res.data?.data || []
  setTotal(res.data?.total || 0)
}
const show = (id: string) => {
  form.keywords = ''
  visible.value = true
  initTaskList()
}
defineExpose({ show })
</script>

<style lang="scss" scoped>
:deep(.arco-collapse-item-content) {
  background: none;
}
</style>
